<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="container">
	<div id="layout">
        <div id="topnav">
        	<h1>Welcome to Sparktools.com</h1>
            <ul>
                <div id="studentgroup" onclick="location.href='#';"><li><a href="#" title="Your organizations account AccessKey: b" accesskey="b"><div id="h1">Student Group Account</div></a><div id="p1">Main area for your student group account</div></li></div>
                <div id="community" onclick="location.href='#';"><li><a href="#" title="Sparktools.com Community AccessKey: c" accesskey="c"><div id="h1">Community</div></a><div id="p1">Resources for your student organization</div></li></div>
                <div id="myaccount" onclick="location.href='#';"><li><a href="#" title="Your personal preferences AccessKey: d" accesskey="d"><div id="h1">My Account</div></a><div id="p1">Edit your personal preferences (email addresses, password, etc.)</div></li></div>
                <div id="help" onclick="location.href='#';"><li><a href="#" title="Help using Sparktools.com AccessKey: e" accesskey="e"><div id="h1">Help</div></a><div id="p1">FAQ, Sparktools.com user guide, best practices</div></li></div>
           		<div id="sparktools" onclick="location.href='#';"><li><a href="#" title="About Sparktools.com AccessKey: a" accesskey="a"><div id="h1">Sparktools</div></a><div id="p1">About Sparktools.com</div></li></div>
            </ul>
        </div>
        <!-- Here ends the page layout and begins the yeild of our site -->
        <!-- Projects and actions yield -->
        <div id="location">
<h2>Student group account</h2>
</div>
        <div id="subnav">
            <ul>
                <div id="home" onclick="location.href='#';"><li><a href="#" title="About Sparktools.com AccessKey: 1" accesskey="1">Home</a></li></div>
                <div id="projectsactions" onclick="location.href='#';"><li><a href="#" title="About Sparktools.com AccessKey: 2" accesskey="2">Projects and Actions</a></li></div>
                <div id="contacts" onclick="location.href='#';"><li><a href="#" title="About Sparktools.com AccessKey: 3" accesskey="3">Contacts</a></li></div>
                <div id="finances" onclick="location.href='#';"><li><a href="#" title="About Sparktools.com AccessKey: 4" accesskey="4">Finances</a></li></div>
                <div id="documents" onclick="location.href='#';"><li><a href="#" title="About Sparktools.com AccessKey: 5" accesskey="5">Documents</a></li></div>
                <div id="groupaccount" onclick="location.href='#';"><li><a href="#" title="About Sparktools.com AccessKey: 6" accesskey="6">Group Account</a></li></div>
            </ul>
        </div>
    </div>
    <div id="yield">
        <div id="pagedescription"><h2>Projects and Actions</h2><p class="p1">Keep track of your organizations’ projects and the action items associate with them. Help using this application</p></div>
        <div id="projects">
        	<div id="header"><h3>All Projects</h3></div>
            <div id="buttons">
            	<ul>
                	<div id="newactionbutton" onclick="location.href='#';"><li><a href="#" title="Create a new project AccessKey: f" accesskey="f">New project</a></li></div>
                </ul>
            </div>
            <div id="body">
            	<table border="1" cellspacing="0" cellpadding="2" summary="This table lists all your student organizations currently open projects">
                    <tr class="sortrow">
                        <td abbr="name">Project Name</td>
                        <td abbr="number">Number of Actions</td>
                        <td abbr="next due">Next Action Due</td>
                    </tr>
                    <!-- This is where dynamic content should go -->
                    <tr class="listrow">
                        <td>Project 1</td>
                        <td>5</td>
                        <td>2 days</td>
                    </tr>
                    <!-- end of dynamic content -->
                </table>
            </div>
        </div>
        <div id="actions">
        	<div id="header"><h3>All Actions</h3></div>
            <div id="buttons">
            	<ul>
                	<div id="newactionbutton" onclick="location.href='#';"><li><a href="#" title="Create a new project AccessKey: f" accesskey="f">New action</a></li></div>
                    <div id="filteroptionbutton" onclick="location.href='#';"><li><a href="#" title="List filtering options AccessKey: f" accesskey="f">Filter options</a></li></div>
                </ul>
            </div>
            <div id="filteroptions">
            	<h4>Filter options</h4>
            	<div id="textfilter" title="filter actions by text"><input type="text" value="By text"/></div>
                <div id="assignedfilter" title="filter actions by assigned attribute"><select><option value="open">By assigned</option></select></div>
                <div id="statusfilter" title="filter actions by status attribute"><select><option value="open">By status</option></select></div>
            	
            </div>
            <div id="body">
            	<table border="1" cellspacing="0" cellpadding="2" summary="This table lists all your student organizations currently open actions">
                    <tr class="sortrow">
                        <td abbr="due">Days until due</td>
                        <td abbr="name">Action name</td>
                        <td abbr="note">Last note</td>
                        <td abbr="status">Current status</td>
                        <td abbr="assigned">Assigned to</td>
                    </tr>
                    <!-- This is where dynamic content should go -->
                    <tr class="listrow">
                        <td>1</td>
                        <td>T-shirts for members</td>
                        <td>Our next step is to get t-shirt dyes</td>
                        <td>Active</td>
                        <td>Sobolev</td>
                    </tr>
                    <!-- end of dynamic content -->
                </table>
            </div>
        </div>
	</div>
</div>
</body>
</html>

